<script setup lang="ts">
import _ from 'lodash';
import dayjs from 'dayjs';
import { reactive, onMounted, computed, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { marked } from 'marked';
import { useAppStore } from '@/store/modules/app';
import { botGetById, botLogAdd, botLogGetById, botAnswerEdit } from '@/services/bot';
import { chatLogAdd } from '@/services/chat';
import { fetchEventSource } from '@microsoft/fetch-event-source';
// import { ModelListGet } from '@/services/chat';
import { uploadUrl, ossGetImg } from '@/services/file';
import Dot from '@/components/dot.vue';
import shouqiIcon from '@/assets/copilot/shouqi.svg';
import shouqiHover from '@/assets/copilot/shouqiHover.svg';
import zhankaiIcon from '@/assets/copilot/zhankai.svg';
import zhankaiHover from '@/assets/copilot/zhankaiHover.svg';
import noContent from '@/assets/no-data.svg';
import refreshIcon from '@/assets/copilot/refresh.svg';
import editIcon from '@/assets/copilot/edit.svg';
import copyIcon from '@/assets/copilot/copy.svg';
import FileSaver from 'file-saver';
import { calcWords } from '@/utils';

import { getStorage } from '@/utils';

const router = useRouter();
const route = useRoute();

const appStore = useAppStore();
const user = { id: getStorage('userId'), nickname: getStorage('nickname') };

const {
  id: botId,
  botLogId,
  flag = '',
} = route.query as {
  id: string;
  logId: string;
  botLogId: string;
  flag: string;
  linkUrl: string;
};
const state = reactive({
  isShouqi: false,
  form: { number: 1 } as any,
  modelTypes: [] as any[],
  modelType: '',
  model: '',
  modelId: 18,
  modelTypeTemp: [] as any,
  list: [] as any[],
  editData: {} as any,
  loading: false,
  leftLoading: false,
  stars: [] as any,
  total: 5,
  refreshVisible: [] as any,
  // 弹窗
  visible: false,
  bot: {} as any,
  values: [] as string[],
  detailParams: {} as any,
  edits: [] as any,
  newNums: -1,
  refreshKey1: -1,
  refreshKey2: -1,
  refreshKey11: -1,
  refreshKey21: -1,
  currentAnswer: {} as any,
  isShengCheng: false,

  flag,
  // 新ai
  conversation_id: '',
  task_id: '',
  // 上传文件
  linkUrl: '', // 输入链接
  loadingInstance: null as any,
  audioPath: '', // 上传
  fileNumber: 0,
  linkList: [
    // {
    //   type: 'document',
    //   transfer_method: 'remote_url',
    //   url: 'https://huashujiaoyu.com/static/files/202412261730302345.docx',
    // },
  ] as any,
  // 文件类型
  wolds: 'txt,doc,docx,pdf,ppt,pptx,xlsx,xls',
  imgs: 'jpg,jpeg,png,gif,webp,svg',
  audios: 'mp3,m4a,wav,webm,amr',
  videos: 'mp4,mov,mpeg,mpga',
});
const prompts = computed(() => {
  const { prompt } = state.bot;
  return prompt;
});

const onCopy = (content: string, isErr: string) => {
  if (isErr) {
    return false;
  }
  const save = (e: any) => {
    e.clipboardData.setData('text/plain', content);
    e.preventDefault(); // 阻止默认行为
  };
  document.addEventListener('copy', save); // 添加一个copy事件
  document.execCommand('copy'); // 执行copy方法
  ElMessage({ message: '复制成功', type: 'success' });
  document.removeEventListener('copy', save);
};
const onRefresh = async (val: any, i: number, j: number) => {
  const [{ isErr }] = val.answers;
  if (isErr) {
    return false;
  }
  if (state.isShengCheng) {
    return false;
  }
  state.currentAnswer = val;
  state.refreshKey1 = i;
  state.refreshKey2 = j;
  state.refreshKey11 = i;
  state.refreshKey21 = j;
  state.newNums = -1;
  // const temp = JSON.parse(val.params);
  let content = prompts.value[0];
  // temp.forEach((prompt: string[], index: number) => {
  //   content = content.replace(`${prompt[0]}`, prompt[1]);
  // });
  state.list[i].answers[j].answer = '';
  state.list[i].answers[j].words = 0;
  messageGet(content, i, j);
};
const onEdit = async (key: string, content: string, isErr: string) => {
  if (isErr) {
    return false;
  }
  if (state.isShengCheng) {
    return false;
  }
  // state.editData[key] = content;
  state.edits[key] = true;
};
const onSave = async (i: number, j: number, answer: any) => {
  const key = `${i}${j}`;
  state.edits[key] = false;
  const args = {
    id: answer.id,
    answer: answer.answer,
    // answer: state.editData[`${i}${j}`],
  };
  const { errCode } = await botAnswerEdit(args);
  if (errCode === 0) {
    state.list[i].answers[j].answer = answer.answer;
    ElMessage({ message: '保存成功', type: 'success' });
  } else {
    ElMessage({ message: '保存失败', type: 'error' });
  }
};
const starChange = async (key: string, answer: any) => {
  state.edits[key] = false;
  answer.score = state.stars[key];
  const args = {
    id: answer.id,
    score: state.stars[key],
  };
  await botAnswerEdit(args);
};
// 删除确定
const delOk = async (answer: any, i: number, j: number) => {
  if (state.isShengCheng) {
    return false;
  }
  const key = `${i}${j}`;
  state.refreshVisible[key] = false;
  const { errCode } = await botAnswerEdit({ id: answer.id, status: '0' });
  if (errCode === 0) {
    state.list[i].answers.splice(j, 1);
    ElMessage({ message: '删除成功!', type: 'success' });
  } else {
    ElMessage({ message: '删除失败!', type: 'error' });
  }
};
const goBack = async () => {
  router.go(-1);
};
const getBot = async () => {
  state.leftLoading = true;
  const { data, errCode } = await botGetById({ id: botId });
  state.leftLoading = false;
  if (!errCode) {
    state.bot = data;
    state.flag = state.bot.flag;
  }
};
// watch(
//   () => settingData.value,
//   () => {},
//   {
//     deep: true,
//     immediate: true,
//   },
// );
const getBotLog = async () => {
  if (!botLogId) {
    return;
  }
  const { data, errCode } = await botLogGetById({ id: botLogId });
  if (errCode === 0) {
    state.list = [data];
    const temp = JSON.parse(data.params);
    _.each(temp, (val, key: number) => {
      state.values[key] = val[1];
    });
  }
};

const getModelType = async () => {
  // const data = await ModelListGet({});
  // state.modelTypes = data;
  state.modelId = 18;
  state.modelType = '18';
  state.model = 'deepseek-v3';
};

const onEnded = async () => {
  state.loading = false;
  state.currentAnswer = {};
  state.refreshKey11 = -1;
  state.refreshKey21 = -1;
  state.isShengCheng = false;
  // let content = prompts.value[0];
  const { errCode, data, message } = await botLogAdd({
    userBotId: state.bot.userBotId,
    answers: _.head(state.list).answers,

    num: _.head(state.list).num,
    userId: user.id,
    modelType: _.head(state.list).modelType,
    params: _.head(state.list).params,
  });
  if (errCode === 0) {
    const {
      answers: [{ isErr = '' }],
    } = state.list[0];
    if (isErr) {
      data.answers[0].isErr = isErr;
    }
    state.list[0] = data;
  } else {
    ElMessage({ message, type: 'warning' });
  }
};
// eventSource.close();
const messageGet = async (contentTemp?: any, i?: number | undefined, j?: number | undefined) => {
  // 生成时
  if (state.isShengCheng) {
    // 生成过程中不能再次生成
    return false;
  }
  // 封装成对应格式
  // const tt = prompts.value.map((p: any, i: number) => [`${p[1]}:${state.values[i] || ''}`]);
  const tt = [] as any;
  // 判断必传项是否传了
  let bichuan = '';
  _.each(prompts.value, (p: any, i: number) => {
    if (state.values[i]) {
      if (p[0] !== 'file') {
        tt.push(`${p[1]}:${state.values[i]}`);
      } else {
        creatlinkList(state.values[i]);
      }
    }
    if (p[4] === '1' && !state.values[i] && !bichuan) {
      if (p[0] === 'text') {
        bichuan = `请输入${p[1]}`;
      }
      if (p[0] === 'select') {
        bichuan = `请选择${p[1]}`;
      }
      if (p[0] === 'file') {
        bichuan = `请上传${p[1]}`;
      }
    }
  });
  if (bichuan) {
    ElMessage({ message: bichuan || '有填写必填项', type: 'warning' });
    return false;
  }
  let args = {
    inputs: { modelType: state.model },
    query: tt.join('\n'),
    user: user.id,
    botId,
    files: state.linkList,
    // files: [
    //   // {
    //   //   type: 'document',
    //   //   transfer_method: 'remote_url',
    //   //   url: 'https://huashujiaoyu.com/static/files/202412261730302345.docx',
    //   // },
    // ],
  } as any;
  if (state.conversation_id) {
    args = { ...args, conversation_id: state.conversation_id };
  }
  // if (args) {
  //   return false;
  // }
  if (!contentTemp) {
    // 处理数据
    const answers = [];
    for (let i = 0; i < state.form.number; i++) {
      answers.push({
        answer: '',
        index: i,
        words: 0,
        isErr: '',
      });
    }
    state.list.unshift({
      answers,
      params: JSON.stringify(prompts.value.map((p: any, i: number) => [p[1], state.values[i]])),
      modelType: state.modelType,
      num: state.form.number,
    });
  }
  chatSendContent(args, i, j);
};
const chatSendContent = async (args: any, i?: number | undefined, j?: number | undefined) => {
  const api = 'http://192.168.1.98/api';
  fetchEventSource(`${api}/dify/dify/chat-stream`, {
    headers: {
      // Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    method: 'post',
    body: JSON.stringify({ ...args }),
    onmessage: e => {
      let { type, content, conversation_id, task_id, index = 0 } = JSON.parse(e.data) || {};
      if (type === 'message') {
        state.loading = false;
        state.refreshKey1 = -1;
        state.refreshKey2 = -1;
        state.conversation_id = conversation_id;
        state.task_id = task_id;

        if ((i || i === 0) && (j || j === 0)) {
          // 格式1处理
          if (content.indexOf('> 💭') !== -1) {
            content = content.replace('>', '');
            state.list[i].answers[j].answer += '<div class="dify-res1">';
          }
          if (content === '\n\n\n\n') {
            state.list[i].answers[j].answer += '</div>';
          }
          if (content.indexOf('\n>') !== -1) {
            content = content.replace('\n>', '\n');
          }
          // 格式2处理
          if (content.indexOf('<think>') !== -1) {
            state.list[i].answers[j].answer += '<div class="">Thinking</div>';
            state.list[i].answers[j].answer += '<div class="dify-res1">';
          }
          if (content.indexOf('</think>') !== -1) {
            state.list[i].answers[j].answer += '</div>';
          }
          const tem = _.head(state.list[i].answers) || {};
          const { answer = '', words = 0 } = state.list[i].answers[j] || {};
          state.list[i].answers[j] = { ...tem, answer, words, isErr: '' };
          state.list[i].answers[j].answer += content;
          state.list[i].answers[j].words = calcWords(state.list[i].answers[j].answer);
          return false;
        }
        // 格式1处理
        if (content.indexOf('> 💭') !== -1) {
          content = content.replace('>', '');
          _.head(state.list).answers[index].answer += '<div class="dify-res1">';
        }
        if (content === '\n\n\n\n') {
          _.head(state.list).answers[index].answer += '</div>';
        }
        if (content.indexOf('\n>') !== -1) {
          content = content.replace('\n>', '\n');
        }
        // 格式2处理
        if (content.indexOf('<think>') !== -1) {
          _.head(state.list).answers[index].answer += '<div class="">Thinking</div>';
          _.head(state.list).answers[index].answer += '<div class="dify-res1">';
        }
        if (content.indexOf('</think>') !== -1) {
          _.head(state.list).answers[index].answer += '</div>';
        }
        _.head(state.list).answers[index].answer += content;
        _.head(state.list).answers[index].words = calcWords(_.head(state.list).answers[index].answer);
        _.head(state.list).answers[index].isErr = '';
      }
      if (type === 'end') {
        // 结束了, 这个可以添加log记录
        onEnded();
      }
    },
    onerror: err => {
      // eventSource.close();
      // throw err;
    },
    onclose: () => {
      // state.question = '';
      state.loading = false;
    },
  });
};
const setDetailParams = (index: number) => {
  const data = state.list[index];
  state.detailParams = {
    modelType: _.find(state.modelTypes, { modelType: data.modelType })?.name,
    num: data.num,
    params: JSON.parse(data.params),
  };
  state.visible = true;
};
// 导出记录
const exportLog = (row: any) => {
  let temp = '';
  // answer?.answer?.replace(/\n/g, '<br/>')
  _.each(row.answers, v => {
    temp += v.answer;
  });
  const blob = new Blob([temp], { type: 'text/plain;charset=utf-8' });
  const name = state.bot.name;
  FileSaver.saveAs(blob, `${name}${dayjs(new Date()).format('YYYY-MM-DD')}.docx`);
};
onMounted(async () => {
  await getModelType();
  const { showAside = true } = route.query;
  // state.modelType = _.head(modules)?.value as string;
  // state.model = _.head(_.head(modules)?.children)?.value as string;
  state.modelTypeTemp = [state.modelType, state.model];
  Promise.all([getBot(), getBotLog()]);
  // 兼容预览机器人
  if (showAside === 'false') {
    const aside = document.getElementsByClassName('el-aside')[0] as any;
    aside.style.display = 'none';
    // back-icon
    const back = document.getElementsByClassName('back-icon')[0] as any;
    back.style.display = 'none';
  }
});

onBeforeUnmount(() => {});

const handleChange = () => {
  const { model, modelType } = _.find(state.modelTypes, { id: state.modelId }) || {};
  state.model = model;
  state.modelType = modelType;
  state.conversation_id = '';
};
// 新格式
const tomarked = (text: string) => {
  return marked ? marked(text) : text;
};
// 文件上传
// 文件上传
const audioBeforeUpload = (rawFile: any) => {
  // const isLt500K = rawFile.size / 1024 / 1024 < 0.5;
  // if (!isLt500K) {
  //   ElMessage.error('上传的文件大小不能超过 500KB!');
  //   return Promise.reject();
  // }
  // if (!_.includes(['mp3'], _.last(rawFile.name.split('.')))) {
  //   ElMessage.error('音频文件格式MP3');
  //   return Promise.reject();
  // }
  state.loadingInstance = ElLoading.service({
    lock: true,
    text: '上传中',
    spinner: 'Loading',
  });
};
const audioUploadSuccess = (res: any) => {
  const { errCode, data } = res;
  if (errCode === 0) {
    if (state.loadingInstance) {
      state.loadingInstance.close();
    }
    state.audioPath = `${ossGetImg}${data.key}`;
    state.values[state.fileNumber] = state.audioPath;
  }
};
const creatlinkList = (filePath: string) => {
  const houzhui = _.last(filePath.split('.')) as any;
  if (_.includes(state.wolds, houzhui.toLowerCase())) {
    state.linkList.push({
      type: 'document',
      transfer_method: 'remote_url',
      url: filePath,
    });
  }
  if (_.includes(state.imgs, houzhui.toLowerCase())) {
    state.linkList.push({
      type: 'image',
      transfer_method: 'remote_url',
      url: filePath,
    });
  }
};
const handUrl = (i: number) => {
  state.fileNumber = i;
  state.values[i] = state.linkUrl;
};
const fileDel = (i: number) => {
  state.values[i] = '';
  state.audioPath = '';
};
</script>
<template>
  <div class="copilotinfo-page">
    <div v-if="!state.isShouqi" v-loading="state.leftLoading" class="info-left">
      <div class="left-top">
        <div class="top-title">
          <el-icon class="back-icon" @click="goBack">
            <ArrowLeft />
          </el-icon>
          <span>{{ state.bot.name }}</span>
        </div>
        <div class="left-content">
          <div class="left-old">
            <template v-for="(item, i) in prompts || []" :key="i">
              <div v-if="item[0] === 'text'">
                <div class="con-title"><span v-if="item[4] === '1'" class="bichuan">*</span>{{ item[1] }}</div>
                <el-input v-model="state.values[i]" :rows="item[3] || 1" :placeholder="item[2]" type="textarea" />
              </div>
              <div v-if="item[0] === 'select'">
                <div class="con-title"><span v-if="item[4] === '1'" class="bichuan">*</span>{{ item[1] }}</div>
                <el-select v-model="state.values[i]" class="m-2" :placeholder="item[2]" size="large">
                  <el-option v-for="(option, j) in item[3]" :key="j" :label="option.name" :value="option.name" />
                </el-select>
              </div>
              <div v-if="item[0] === 'file'">
                <div class="con-title"><span v-if="item[4] === '1'" class="bichuan">*</span>{{ item[1] }}</div>
                <el-input
                  v-model="state.linkUrl"
                  :disabled="state.audioPath ? true : false"
                  class="link-input"
                  placeholder="输入文件链接"
                  @input="handUrl(i)"
                >
                </el-input>
                <el-divider> OR </el-divider>
                <el-upload
                  :headers="{ Authorization: `Bearer ${getStorage('token')}` }"
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="1"
                  :before-upload="audioBeforeUpload"
                  :show-file-list="false"
                  :on-success="(res: any) => audioUploadSuccess(res)"
                  :disabled="state.linkUrl ? true : false"
                >
                  <el-button
                    :disabled="state.linkUrl ? true : false"
                    class="file-btn"
                    color="#626aef"
                    @click="handUrl(i)"
                  >
                    上传文件
                  </el-button>
                </el-upload>
                <!-- <div v-if="!state.values[i]" class="fileUpload btn-color">上 传</div> -->
                <div v-if="state.audioPath" class="file-con">
                  <span class="file-path">{{ state.audioPath }}</span>
                  <span class="file-del" @click="fileDel(i)">移除</span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="left-bottom">
        <div class="bom-right">
          <div v-if="state.isShengCheng" class="shengcheng btn-disabled">生 成</div>
          <div v-else class="shengcheng btn-color" @click="messageGet(), (state.newNums = 1)">生 成</div>
        </div>
      </div>
    </div>
    <div class="info-right" :style="`width:${state.isShouqi ? '100%' : 'calc(100% - 460px)'};`">
      <div class="shouqi-con" @click="state.isShouqi = !state.isShouqi">
        <span class="no-hover">
          <el-image v-if="state.isShouqi" :src="zhankaiIcon" class="shouqi-icon" />
          <el-image v-else :src="shouqiIcon" class="shouqi-icon" />
        </span>
        <span class="is-hover">
          <el-image v-if="state.isShouqi" :src="zhankaiHover" class="shouqi-icon" />
          <el-image v-else :src="shouqiHover" class="shouqi-icon" />
        </span>
      </div>
      <div v-if="state.list.length === 0 && state.loading">
        <div class="right-top">
          <div class="top-hand">
            <span class="name">{{ state.bot.name }}</span>
            <span class="canshu">详细参数</span>
            <span class="export">导出记录</span>
          </div>
          <div class="time">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
        <el-skeleton :rows="4" animated />
      </div>
      <div v-if="state.list.length > 0">
        <div v-for="(item, i) in state.list" :key="i">
          <div v-if="i + 1 > state.newNums || (i + 1 <= state.newNums && !state.loading)">
            <div class="right-top" :style="`margin-top:${i !== 0 ? '40px' : ''}`">
              <div class="top-hand">
                <span class="name">{{ state.bot.name }}</span>
                <span class="canshu" @click="setDetailParams(i)">详细参数</span>
                <span class="export" @click="exportLog(item)">导出记录</span>
              </div>
              <div class="time">
                {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
            <div class="list" v-for="(answer, j) in item.answers || []" :key="j">
              <div v-if="!(state.refreshKey1 === i && state.refreshKey2 === j)">
                <div v-if="!state.edits[`${i}${j}`]">
                  <div class="l-con">
                    <!-- <pre>{{ answer?.answer }}</pre> -->
                    <span v-html="tomarked(answer?.answer)"></span>
                    <Dot
                      v-if="
                        state.isShengCheng &&
                        ((state.refreshKey11 === i && state.refreshKey21 === j) || (!state.currentAnswer.id && i === 0))
                      "
                    />
                  </div>
                  <div class="l-info">
                    <div class="l-left">
                      <div class="l-num">{{ answer.words }}字</div>
                      <div style="display: none">
                        {{ (state.stars[`${i}${j}`] = answer.score || 0) }}
                      </div>
                      <el-rate
                        v-model="state.stars[`${i}${j}`]"
                        void-icon="StarFilled"
                        @change="starChange(`${i}${j}`, answer)"
                      />
                      <div class="star-info">{{ state.stars[`${i}${j}`] }}/5</div>
                    </div>
                    <div v-if="!state.isShengCheng" class="l-right">
                      <el-popover :width="74" popper-class="refresh-pop" trigger="hover" placement="top">
                        <div class="reset-sc">重新生成</div>
                        <template #reference>
                          <el-image :src="refreshIcon" class="edit-icon" @click="onRefresh(item, i, j)"></el-image>
                        </template>
                      </el-popover>
                      <el-popover :width="54" popper-class="refresh-pop" trigger="hover" placement="top">
                        <div class="reset-sc">编辑</div>
                        <template #reference>
                          <el-image
                            :src="editIcon"
                            class="edit-icon"
                            @click="onEdit(`${i}${j}`, answer?.answer, answer?.isErr)"
                          ></el-image>
                        </template>
                      </el-popover>
                      <el-popover :width="54" popper-class="refresh-pop" trigger="hover" placement="top">
                        <div class="reset-sc">复制</div>
                        <template #reference>
                          <el-image
                            :src="copyIcon"
                            class="edit-icon"
                            @click="onCopy(answer?.answer, answer?.isErr)"
                          ></el-image>
                        </template>
                      </el-popover>
                      <el-popover
                        :visible="state.refreshVisible[`${i}${j}`]"
                        :width="180"
                        popper-class="del-pop"
                        trigger="click"
                        placement="bottom"
                      >
                        <div class="del-desc">
                          <el-icon class="del-icon"> <WarningFilled /> </el-icon>你确定要删除吗？
                        </div>
                        <div class="del-hand">
                          <div class="del-cancel btn-border-color" @click="state.refreshVisible[`${i}${j}`] = false">
                            取消
                          </div>
                          <div class="del-ok btn-color" @click="delOk(answer, i, j)">确定</div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div class="l-con">
                    <el-input v-model="answer.answer" placeholder="请输入要重写的内容" autosize type="textarea" />
                  </div>
                  <div class="l-info">
                    <div class="l-left">
                      <div class="l-num">{{ answer.words }}字</div>
                    </div>
                    <div class="l-right">
                      <div class="oncancel" @click="state.edits[`${i}${j}`] = false">取消</div>
                      <div class="onsave btn-color" @click="onSave(i, j, answer)">保存</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <el-skeleton :rows="4" animated />
              </div>
            </div>
          </div>
          <div v-else>
            <el-skeleton :rows="4" animated />
          </div>
        </div>
      </div>
      <div v-if="state.list.length === 0 && !state.loading" class="noContent">
        <el-image :src="noContent" class="noContent-img" />
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.copilotinfo-page {
  .info-left {
    .left-top {
      .el-select {
        width: 100%;
        height: 48px;
        .el-input {
          height: 48px;
        }
      }
    }
  }
  .tanchuang {
    border-radius: 8px;
    .el-dialog__header {
      padding: 24px 24px 0px;
    }
    .el-dialog__title {
      font-size: 16px;

      font-weight: 500;
      color: #375275;
    }
    .el-dialog__body {
      padding: 0px 24px 24px 24px;
    }
  }
  .el-divider--horizontal {
    margin: 14px 0;
  }
}
.refresh-pop {
  padding: 8px !important;
  background: #3c7eff !important;
  min-width: 50px !important;

  .reset-sc {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
  }
  .el-popper__arrow::before {
    background-color: #3c7eff !important;
  }
}
.del-pop {
  padding: 12px;
  .del-desc {
    color: #375275;
    font-size: 14px;
    .del-icon {
      color: #faad14;
      background-color: #fff;
      float: left;
      margin-right: 8px;
      font-size: 20px;
    }
  }
  .del-hand {
    display: flex;
    justify-content: end;
    margin-top: 12px;
    .del-cancel {
      width: 49px;
      height: 24px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dee8f9;
      box-sizing: border-box;
      line-height: 22px;
      text-align: center;
      margin-right: 8px;
      color: #375275;
      font-size: 14px;
      cursor: pointer;
    }
    .del-ok {
      width: 49px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #3c7eff;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.caiji-btn {
  height: 48px;
  width: 80px;
  border-radius: 0px 4px 4px 0px;
}
// 新的dify
.dify-res1 {
  background: rgb(248, 248, 248);
  color: #808080;
  padding: 8px;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.copilotinfo-page {
  display: flex;
  height: 100%;
  background: #f4f9ff;
  .info-left {
    width: 460px;
    height: 100%;
    background: #ffffff;
    position: relative;
    box-sizing: border-box;
    border-right: 1px solid #dee8f9;
    .left-top {
      width: 100%;
      height: calc(100% - 72px);
      padding: 24px 24px 24px 24px;
      box-sizing: border-box;
      overflow-y: auto;
      .top-title {
        display: flex;
        align-items: center;
        font-size: 18px;

        font-weight: 500;
        color: #375275;
        margin-bottom: 2px;
        .back-icon {
          color: #375275;
          margin-right: 4px;
          cursor: pointer;
          border-radius: 2px;
          width: 24px;
          height: 24px;
          font-size: 16px;
          &:hover {
            color: #3c7eff;
            background-color: #f4f9ff;
          }
        }
      }

      .con-title {
        font-size: 14px;
        font-weight: 500;
        color: #375275;
        line-height: 20px;
        margin-top: 24px;
        margin-bottom: 8px;
      }
      .bichuan {
        color: #f66442;
      }
      .fileUpload {
        width: 120px;
        height: 40px;
        background: #3c7eff;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
      }
      .file-con {
        margin-top: 4px;
        .file-path {
          color: #375275;
          font-size: 14px;
          word-wrap: break-word;
        }
        .file-del {
          color: #f66442;
          font-size: 14px;
          margin-left: 12px;
          cursor: pointer;
        }
      }
    }
    .left-bottom {
      width: 100%;
      height: 72px;
      background: #ffffff;
      border-top: 1px solid #dee8f9;
      box-sizing: border-box;
      padding: 0px 24px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .bom-right {
        // display: flex;
        // justify-content: space-between;
        width: 192px;
        .shengcheng-number {
          float: left;
        }
        .shengcheng {
          float: right;
        }
      }
      .shengcheng {
        width: 120px;
        height: 40px;
        background: #3c7eff;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .info-right {
    width: auto;
    height: 100%;
    padding: 12px 24px;
    overflow-y: scroll;
    box-sizing: border-box;
    position: relative;
    .shouqi-con {
      width: 18px;
      height: 24px;
      background: #fff;
      border-radius: 0px 4px 4px 0px;
      border: 1px solid #dee8f9;
      border-left: none;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: absolute;
      top: 50%;
      left: 0px;
      cursor: pointer;
      &:hover {
        .no-hover {
          display: none;
        }
        .is-hover {
          display: block;
        }
      }
      .no-hover {
        display: block;
      }
      .is-hover {
        display: none;
      }
      .shouqi-icon {
        display: block;
        width: 8px;
        height: 8px;
      }
    }
    .right-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      margin-top: 12px;
      .top-hand {
        .name {
          font-size: 18px;

          font-weight: 500;
          color: #375275;
        }
        .canshu {
          font-size: 14px;
          color: #3c7eff;
          margin-left: 24px;
          cursor: pointer;
        }
        .export {
          font-size: 14px;
          color: #3c7eff;
          margin-left: 16px;
          cursor: pointer;
        }
      }
      .time {
        font-size: 14px;
        color: #8c9ba8;
      }
    }
    .edit-con {
      margin-top: 40px;
    }
    .list {
      width: 100%;
      // height: 136px;
      height: auto;
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(55, 82, 117, 0.05);
      border-radius: 8px;
      padding: 20px;
      box-sizing: border-box;
      margin-top: 8px;
      border: 1px solid #fff;
      &:hover {
        border: 1px solid #3c7eff;
      }
      .l-con {
        font-size: 14px;
        color: #375275;
        line-height: 22px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-line-clamp: 3;
        // -webkit-box-orient: vertical;
      }
      .l-info {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        .l-left {
          display: flex;
          .l-num {
            color: #8c9ba8;
            font-size: 14px;
            line-height: 32px;
            margin-right: 40px;
          }
          .star-info {
            color: #8c9ba8;
            font-size: 14px;
            margin-left: 8px;
            line-height: 32px;
          }
        }
        .l-right {
          width: 104px;
          display: flex;
          justify-content: space-between;
          .edit-icon {
            width: 20px;
            height: 20px;
            display: block;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
              background-color: #f4f9ff;
            }
          }
          .oncancel {
            font-size: 14px;

            font-weight: 400;
            color: #3c7eff;
            line-height: 32px;
            cursor: pointer;
          }
          .onsave {
            width: 64px;
            height: 32px;
            background: #3c7eff;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            line-height: 32px;
            cursor: pointer;
          }
        }
      }
    }
    .noContent {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .noContent-img {
        width: 120px;
        height: 120px;
        display: block;
      }
    }
  }
  .tanchuang {
    .t-title {
      font-size: 14px;
      color: #8c9ba8;
      line-height: 20px;
      margin-top: 24px;
    }
    .t-con {
      font-size: 14px;
      color: #375275;
      line-height: 22px;
      margin-top: 8px;
    }
  }
}
.left-top {
  &::-webkit-scrollbar {
    width: 4px; /* 纵向滚动条 */
    height: 4px; /* 横向滚动条 */
    background-color: #f5f5f5;
  }
  /* 定义滚动条轨道 内阴影 */
  &::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
  /* 定义滑块 内阴影 */
  &::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border-radius: 4px;
  }
}
</style>
